<template>
	<view class="Jy_bind-page">
		<view class="Jy_bind_phone_page">
			<view class="Jy_bind_phone_container">
				<view class="Jy_bind_phone_group">
					<view class="phone_group border_bottom">
						<view class="text_box">
							<text>手机号</text>
						</view>
						<view class="input_box">
							<input type="number" v-model="phone" placeholder="请输入手机号" maxlength="11">
						</view>
					</view>
					<view class="code_group">
						<view class="text_box">
							<text>验证码</text>
						</view>
						<view class="input_box">
							<input type="number" maxlength="8" placeholder="验证码" v-model="code">
						</view>
						<view class="get_code_box" @click="getCode()" v-if="codeShow">
							<text>获取验证码</text>
						</view>
						<view class="code_down_box" v-else>
							<text>{{count}}s重新获取</text>
						</view>
					</view>
				</view>
			</view>
			<view class="require_box">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				codeShow: true,
				count: 0,
				timer: null
			};
		},
		onLoad(option) {
			this.getPageTitle(option.phone);
		},
		methods: {
			getPageTitle(phone) {
				if (phone) {
					uni.setNavigationBarTitle({
						title: '修改手机号'
					})
					this.phone = phone
				} else {
					uni.setNavigationBarTitle({
						title: '绑定手机号'
					})
				}
			},
			getCode() {
				this.codeShow = false;
				this.count = 60;
				this.timer = setInterval(() => {
					this.count --;
					if (this.count == 0) {
						this.codeShow = true;
						clearInterval(this.timer);
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'bindPhone.scss';
</style>
